<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>{{title}}</span>
      </div>
      <div class="div">
      </div>
    </header>
    <div style="position: sticky;top: 44px;z-index: 999">
    <van-field v-model="dateday" type="text" readonly placeholder="请选择排班日期" label="排班日期" input-align="right"  />
    <van-field is-link v-model="timeVal" type="text" readonly placeholder="请选择排班时间" label="排班时间" input-align="right"  @click="[isEdit !== 0 ? timeShow = true : '']" />
    <van-field is-link v-model="typeVal" type="text" readonly placeholder="请选择排班内容" label="排班内容" input-align="right" @click="[isEdit !== 0? typeShow = true : '']"/>

    </div>

    <van-collapse v-model="activeNames">
      <van-collapse-item  name="1">
        <template #title>
          <div class="label" ><a class="hengGang"></a>排班情况</div>
        </template>

        <div class="box" v-for="(childenItem, childenIndex) in PaiBanList"
             :key="childenIndex">
          <div class="box_left">
            <p>
              <span>{{childenItem.start_time}} - {{childenItem.end_time}}</span>

              <span v-show="childenItem.type== 1">图文问诊</span>
              <span v-show="childenItem.type== 2">视频问诊</span>
              <span v-show="childenItem.type== 3">居家康复</span>
              <span v-show="childenItem.type== 4">居家护理</span>
              <span v-show="childenItem.type== 5">远程会诊</span>
              <span v-show="childenItem.type== 6">评估</span>
              <!--              <span>限定人数: {{childenItem.allnum}}人</span>-->
            </p>
            <!--            <p>-->
            <!--              -->
            <!--            </p>-->
          </div>
<!--          <div class="box_right">-->
<!--            <button @click.stop="upload(childenItem)">编辑</button>-->
<!--            <button @click.stop="deleteBtn(childenItem)">作废</button>-->
<!--          </div>-->
        </div>
      </van-collapse-item>
    </van-collapse>
    <div class="bottom" v-show="isEdit !== 0">
      <button @click="keep">保存</button>
    </div>
<!--    <van-calendar :style="{bottom: '50px'}"-->
<!--                  color="#1da4f2"-->
<!--                  v-model="show"-->
<!--                  @confirm="onConfirm" />-->
    <van-popup v-model="weekShow" round position="bottom">
      <van-picker show-toolbar
                  @confirm="weekConfirm"
                  @cancel="weekShow = false"
                  title="选择星期" :columns="weekColumns" :default-index="0" />
    </van-popup>

    <van-popup v-model="timeShow"  round position="bottom" >
      <van-picker show-toolbar
                  @confirm="timeConfirm"
                  @cancel="timeShow = false"
                  title="选择排班时间" :columns="TimeColumns" />
    </van-popup>

    <van-popup v-model="typeShow"  round position="bottom">
      <van-picker show-toolbar
                  @confirm="typeConfirm"
                  @cancel="typeShow = false"
                  title="选择排班内容"  :columns="typeColumns" />
    </van-popup>
    <van-dialog v-model="backShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="当前内容未保存是否确认退出？"
                @confirm="backConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
import Start_EndTime from '../../assets/Time/Start_EndTime'
export default {
  name: 'ScheduleAddOrUpdate',
  data () {
    return {
      title: '',
      id: this.$route.query.id,
      hospital_id: '', // 机构ID 个人排班该字段为null（不用传）,
      type: Number(this.$route.query.type), // 排班类型 1:图文问诊;2:视频问诊;3:居家康复;4:居家护理;5:远程会诊;6:评估
      start_time: this.$route.query.start_time, // 排班开始时间
      end_time: this.$route.query.end_time, // 排班结束时间
      // allnum: this.$route.query.allnum, // 人数
      weekday: Number(this.$route.query.weekday), // 周几 传对应的数字
      weekVal: '',
      typeVal: '',
      weekShow: false,
      timeShow: false,
      typeShow: false,
      weekColumns: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      Tims: ['08:30', '09:00', '09:30', '10:00',
        '10:30', '11:00', '11:30', '12:00', '12:30', '13:00',
        '13:30', '14:00', '14:30', '15:00', '15:30', '16:00',
        '16:30', '17:00', '17:30', '18:00', '18:30', '19:00',
        '19:30', '20: 00'],
      typeColumns: [
        {
          text: '图文问诊',
          type: 1
        }, {
          text: '视频问诊',
          type: 2
        }, {
          text: '远程会诊',
          type: 5
        }, {
          text: '居家康复',
          type: 3
        }, {
          text: '居家护理',
          type: 4
        }, {
          text: '评估',
          type: 6
        }
      ],
      TimeColumns: Start_EndTime.columns,
      backShow: false,
      show: false,
      dateday: this.$route.query.dateday,
      doc_user_id: this.$route.query.doc_user_id,
      isEdit: Number(this.$route.query.isEdit),
      activeNames: ['1'],
      PaiBanList: []
    }
  },
  computed: {
    // 时间段
    // TimeColumns: function () {
    //   let list = []
    //   for (var i in this.Tims) {
    //     let childen = []
    //     for (let k in this.Tims.slice(i)) {
    //       // var okk = {
    //       //   text: this.Tims.slice(i)[k]
    //       // }
    //       var okk
    //        if (k == 0) {
    //         okk = {
    //           text: this.Tims.slice(i)[k],
    //           disabled: true
    //         }
    //       } else {
    //         okk = {
    //           text: this.Tims.slice(i)[k]
    //         }
    //       }
    //       childen.push(okk)
    //     }
    //     var obj = {
    //       text: this.Tims[i],
    //       children: childen
    //     }
    //     list.push(obj)
    //   }
    //   return list
    // },
    timeVal: function () {
      if (this.start_time !== '' && this.start_time !== undefined) {
        return this.start_time + '-' + this.end_time
      }
    }
  },
  mounted () {
    if (this.isEdit === 1) {
      this.title = '编辑排班'
      document.title = this.title
    } else if (this.id !== '' && this.id !== undefined && this.id !== null) {
      this.title = '查看排班'
      document.title = this.title
    } else {
      this.title = '新增排班'
      this.id = ''
      document.title = this.title
    }
    if (this.type !== '' && this.type !== undefined) {
      for (var i in this.typeColumns) {
        if (this.type === this.typeColumns[i].type) {
          this.typeVal = this.typeColumns[i].text
          break
        }
      }
    }
    this.getDataList()
  },
  methods: {
    // 获取当天排班信息列表
    getDataList () {
      this.isLoading = true
      this.$http.findDocScheduleAll({doc_user_id: this.doc_user_id, dateday: this.dateday})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.PaiBanList = res.data.data
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 选中日期确认按钮
    onConfirm (value) {
      this.show = false
      this.dateday = new Date(value).toLocaleDateString().replace(/\//g, '-')
    },
    // 保存
    keep () {
      if (this.dateday === '' || this.dateday === undefined || this.dateday === null) {
        Toast('请选择排班日期')
        return false
      }
      if (this.start_time === '' || this.start_time === undefined || this.start_time === null) {
        Toast('请选择排班时间')
        return false
      }
      if (!this.type) {
        Toast('请选择排班内容')
        return false
      }

      if (this.id !== '' && this.id !== undefined && this.id !== null) {
      } else {
        this.id = 0
      }
      this.$http.insertDocSchedule({
        id: this.id,
        type: this.type,
        start_time: this.start_time,
        end_time: this.end_time,
        dateday: this.dateday
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getDataList()

            if (this.isEdit == 1) {
              Toast('修改成功')
            } else {
              Toast('保存成功')

              this.type = ''
              this.typeVal = ''
              this.start_time = ''
              this.end_time = ''
            }
            // this.$router.history.go(-1)
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 排班内容
    typeConfirm (value, index) {
      this.type = value.type
      this.typeVal = value.text
      this.typeShow = false
    },
    // 排班周几
    weekConfirm (value, index) {
      this.weekday = index + 1
      this.weekVal = value
      this.weekShow = false
    },
    // 时间段选择
    timeConfirm (value, index) {
      this.start_time = value[0]
      this.end_time = value[1]
      this.timeShow = false
    },
    backConfirm () {
      this.$router.history.go(-1)
    },
    // 返回
    back () {
      // eslint-disable-next-line eqeqeq
      if (this.isEdit === 0) {
        this.$router.history.go(-1)
      } else if ((this.id == '' || this.id == 0) && (this.start_time !== '' && this.type !== '')) {
        this.backShow = true
      } else {
        this.$router.history.go(-1)
      }
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 5;
  z-index: 999;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  width: 13px;
  height: 13px;
  margin-right: 5px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
 .tishi{
  height: 44px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #E3170D;
  padding: 0 10px;
  box-sizing: border-box;
}
.bottom{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
}
.bottom button{
  width: 95%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 22px;
  border: none;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}

.label{
  /*height: 44px;*/
  display: flex;
  align-items: center;
  /*padding: 0 10px;*/
  box-sizing: border-box;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  background: white;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}
.box{
  width: 100%;
  /*height: 60px;*/
  font-size: 15px;
  color: #333;
  padding: 0 16px;
  box-sizing: border-box;
  border-top: 1px solid #E5E5E5;
}
.box:last-child{
  margin-bottom: 55px;
}
/*.box:nth-child(even) {*/
/*  border-top: 1px solid #E5E5E5;*/
/*}*/
.box_left{
  width: 100%;
  min-height: 44px;
  /*height: 75px;*/
  display: flex;
  align-items: center;
  /*flex-direction: column;*/
}
.box_left p{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.box_left p span{
  margin-right: 15px;
}
.box_right{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.box_right button{
  width: 60px;
  height: 29px;
  border: 1px solid #1DA4F2;
  border-radius: 5px;
  background: #FFFFFF;
  color: #1da4f2;
  margin-left: 20px;
}
/deep/ .van-collapse-item__content {
  padding: 0px ;
}
</style>
